<div class="panel panel-default" id="plugins_list">
    <div class="panel-heading">
        <h3 class="panel-title">All Plugins</h3>

        <!-- <div class="panel-options">
            <a href="#" data-toggle="panel">
                <span class="collapse-icon">–</span>
                <span class="expand-icon">+</span>
            </a>
        </div> -->
    </div>
    <div class="panel-body">

        <div class="table-responsive" data-pattern="priority-columns"
            data-focus-btn-icon="fa-asterisk" data-sticky-table-header="true"
            data-add-display-all-btn="true" data-add-focus-btn="true">

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Version</th>
                            <th>Description</th>
                            <th>Operation</th>
                            <th>status</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="plugin in plugins">
                        <td>{{ plugin.name}}</td>
                        <td>{{ plugin.version}}</td>
                        <td>{{ plugin.description}}</td>
                        <td>
                            <button type="button" class="btn btn-single btn-gray" @click="update(plugin, this)" v-bind:disabled="plugin.name == 'emq_dashboard'"> 
                            <template v-if="plugin.active==true">Stop</template>
                            <template v-else>Start</template>
                            </button>
                           <!-- <button type="button" class="btn btn-single" v-bind:class="{'btn-success': plugin.active ? true : false, 'btn-gray': plugin.active ? false : true}" @click="update(plugin, this)" v-bind:disabled="plugin.name == 'emq_dashboard'">                                       <template v-if="plugin.active==true">Enable</template>
                             <template v-else>Disable</template>
                         </button> -->
                        </td>
                        <td>
                            <span v-show="plugin.active == true" class="badge badge-success">Running</span>
                            <span v-show="plugin.active == false">Stopped</span>
                        </td>
                        </tr>
                    </tbody>
                </table>

        </div>
    </div>
</div>
